<template>
  <div class="scene_container">
    <div class="scene_title">
      <div class="search-con-outer">
        <div class="search-con" @click="goSearch">
          <span class="icon">
            <van-icon name="search" />
          </span>
          <span class="taro-text">在当前场景下搜索</span>
        </div>
      </div>
      <div class="label_box">
        <div class="title" ref="all">
          <div
            class="title_item"
            :class="{ active: use_id == item.tagId }"
            v-for="(item, index) in titleList"
            :key="item.tagId"
            @click="getDataByUseId(item.tagId, index)"
            ref="ref"
          >
            {{ item.name }}
          </div>
          <div
            class="all"
            :class="{ all_active: jiantoutop }"
            @click="jiantoutop = !jiantoutop"
          >
            <img src="./images/xl.png" alt="" />
          </div>
          <div class="all_label" v-show="jiantoutop">
            <div class="label_all_box">
              <div
                class="label_item"
                :class="{ active: use_id == item.tagId }"
                v-for="(item, index) in titleList"
                :key="item.tagId"
                @click="getDataByUseId(item.tagId, index)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="mask"></div>
          </div>
        </div>
      </div>
      <div class="filder_btns">
        <div class="rank_btn">
          <div
            class="rank_item"
            :class="{ active: sort_type === 0 }"
            @click="getDataBySortType(0)"
          >
            最热
          </div>
          <div
            class="rank_item"
            :class="{ active: sort_type === 1 }"
            @click="getDataBySortType(1)"
          >
            最新
          </div>
          <div
            class="rank_item"
            :class="{ active: sort_type === 2 }"
            @click="getDataBySortType(2)"
          >
            使用最多
          </div>
          <div
            class="rank_item"
            :class="{ active: sort_type === 3 }"
            @click="getDataBySortType(3)"
          >
            最多收藏
          </div>
          <div class="rank_item" @click="showQuanBu = !showQuanBu">
            {{ rank_text }}
          </div>
        </div>
        <div class="price_btn" v-show="showQuanBu">
          <div
            class="proce_item"
            :class="{ active: price_type == 0 }"
            @click="getDataByPriceType(0)"
          >
            全部
          </div>
          <div
            class="proce_item"
            :class="{ active: price_type == 2 }"
            @click="getDataByPriceType(2)"
          >
            免费
          </div>
          <div
            class="proce_item"
            :class="{ active: price_type == 3 }"
            @click="getDataByPriceType(3)"
          >
            付费
          </div>
        </div>
      </div>
    </div>
    <!-- 瀑布流 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Waterfall :list="list" />
    </van-list>
  </div>
</template>

<script>
import Waterfall from "@/components/Waterfall";
export default {
  name: "Scene",
  props: [],
  data() {
    return {
      //可滑动标题区域
      titleList: [{ tagId: 0, name: "全部" }],
      //控制按钮全部那一排的显示与隐藏
      showQuanBu: false,
      //主题图片数据
      picList: [],
      page: 1, //请求页数
      total: 0, //总数
      //获取不同数据是所需要的数据
      use_id: 0, //点击标题，并请求数据
      sort_type: 0, //控制第二行的高亮
      price_type: 0, //控制第三行的高亮
      loading: true, //控制触底加载
      finished: false, //控制加载完毕
      jiantoutop: false, //控制三角的朝向
    };
  },
  created() {
    this.getTitleData();
    this.getAddress();
  },
  computed: {
    //计算按钮筛选与收齐的字体显示
    rank_text() {
      return this.showQuanBu ? "收齐" : "筛选";
    },
    //计算出复合瀑布流的数据
    list() {
      return this.picList.filter((item) => {
        item.imgUrl = item.designTemplateThumbUrls[0];
        return true;
      });
    },
    reList() {
      return this.picList.filter((item) => item.id == 468286);
    },
  },
  components: {
    Waterfall,
  },
  methods: {
    //去search页面
    goSearch() {
      this.$router.push("/search");
    },
    //获取标题数据
    async getTitleData() {
      const res = await this.$API.get(
        `/api/home/getDesignType.do?_dataType=json&client_type=40&second_kind_id=${this.$route.query.kindId}&_dataClientType=3`
      );

      let list =
        res.data.body.secondKindInfo.repoTag.use.length == 0
          ? res.data.body.secondKindInfo.repoTag.style
          : res.data.body.secondKindInfo.repoTag.use;

      this.titleList = this.titleList.concat(list);
    },
    //获取地址
    async getAddress() {
      const res = await this.$API.get(
        `/api/designtemplate/getWxAppTemplateByKindId.do?_dataType=json&client_type=40&fid=0&type=0&page_no=${this.page}&sid=${this.$route.query.kindId}&is_new=1&price_type=${this.price_type}&sort_type=${this.sort_type}&name=${this.$route.query.n}&use_id=${this.use_id}&key=use&_dataClientType=3`
      );
      if (res.status !== 200) return;
      let url = "/pub" + res.data.body.cacheUrl.slice(27);
      this.getData(url);
    },
    //获取数据
    async getData(url) {
      const res = await this.$API.get(url);
      if (res.status !== 200) return;
      this.picList.push(...res.data.body.templates);
      this.total = res.data.body.totalCount;
      this.page++;
      this.loading = false;
    },
    //切换第一排高亮,并请求数据
    getDataByUseId(use_id, index) {
      this.jiantoutop = false;
      if (this.use_id == use_id) return;
      let width =
        this.$refs.ref[index].offsetLeft -
        (375 - this.$refs.ref[index].offsetWidth) / 2;
      this.$refs.all.scrollTo({
        left: width,
        behavior: "smooth",
      });
      this.loading = true;
      this.use_id = use_id;
      this.page = 1;
      this.picList = [];
      this.getAddress();
    },
    //切换下面按钮第二排高亮切换，并获取数据
    getDataBySortType(s_type) {
      if (this.sort_type == s_type) return;
      this.loading = true;
      this.sort_type = s_type;
      this.page = 1;
      this.picList = [];
      this.getAddress();
    },
    //切换下面按钮第三排高亮切换，并获取数据
    getDataByPriceType(p_type) {
      if (this.price_type == p_type) return;
      this.loading = true;
      this.price_type = p_type;
      this.page = 1;
      this.picList = [];
      this.getAddress();
    },
    //触底的加载函数
    onLoad() {
      if (this.total - 10 <= this.picList.length) {
        this.finished = true;
      }
      this.getAddress();
    },
  },
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  display: none;
}
.scene_container {
  padding-top: 156px;
  .scene_title {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    .search-con-outer {
      padding: 10px 0;
      background-color: #fff;
      .search-con {
        margin: 0 12px;
        height: 34px;
        line-height: 34px;
        background-color: #f8f8fb;
        font-size: 13px;
        text-align: center;
        border-radius: 17px;
        .icon {
          display: inline-block;
          margin-right: 10px;
          font-size: 15px;
        }
        .taro-text {
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }

    .label_box {
      position: relative;
      padding-right: 15px;
      background-color: #fff;
      .title {
        display: flex;
        flex-wrap: nowrap;
        padding: 0 10px;
        overflow-x: auto;
        transition: all 0.5s linear;
        .title_item {
          white-space: nowrap;
          font-size: 15px;
          position: relative;
          line-height: 42.5px;
          margin: 0 10px;
          &:first-child {
            margin-left: 0;
          }
        }
        .active {
          font-weight: 700;
          color: #000;
          &:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 20px;
            height: 3px;
            border-radius: 3px 3px 0 0;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            background-color: #0773fc;
          }
        }
        .all {
          position: absolute;
          width: 23px;
          height: 23px;
          right: 5px;
          top: 10px;
          transition: transform 0.2s, -webkit-transform 0.2s;
          background-color: #fff;
          box-shadow: 0 0 10px 10px #fff;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .all_active {
          transform: rotate(180deg);
        }
        .all_label {
          position: absolute;
          left: 0;
          top: 42px;
          z-index: 9999999;
          width: 100%;
          background-color: #fff;
          .label_all_box {
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            .label_item {
              height: 30px;
              line-height: 30px;
              font-size: 12px;
              border-radius: 15px;
              padding: 0 14px;
              margin-right: 11px;
              background-color: #f3f4f9;
              margin-bottom: 10px;
            }
            .active {
              background: #0773fc !important;
              color: #fff !important;
            }
          }
          .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
    .filder_btns {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 10px;
      margin-top: -1px;
      .rank_btn {
        display: flex;
        margin-bottom: 10px;
        .rank_item {
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          border-radius: 15px;
          padding: 0 14px;
          margin-right: 11px;
          background-color: #f3f4f9;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .price_btn {
        display: flex;
        .proce_item {
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          border-radius: 15px;
          padding: 0 14px;
          margin-right: 11px;
          background-color: #f3f4f9;
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .active {
        background: #0773fc !important;
        color: #fff !important;
      }
    }
  }
}
</style>